bot-list {
  main {
    min-height: calc(100% - 50px);
      a[href] {
      color: #105d90;
    }
  }

  .bot-table {
    border-collapse: collapse;
    margin-left: 5px;

    td,th {
      border: 1px solid #DDD;
      padding: 5px;
    }

    td.no_outline {
      border: none;
      background-color: white;
    }

    th.col_options {
      padding: 0;

      > * {
        display:inline-block;
      }

      .show_widget {
        background-color: #eee;
        border-radius: 8px;
        cursor: pointer;
        float: left;
        &:hover{
          background-color: #ccc;
        }
      }

      .col_selector {
        background-color: #FFF;
        border: 1px solid black;
        font-weight: normal;
        height: 60vh;
        left: -1px;
        min-width: 280px;
        overflow-y: auto;
        padding: 2px;
        position: absolute;
        top: 28px;
        z-index: 3;
      }
    }

    th {
      position: relative;
    }
  }

  .flex {
    flex: 1; /* expand to all available space */
  }

  /* These things can be inside a key/value/filter selector,
     and are similar in style*/
  .item, .information_only {
    border-bottom: 1px solid #EEE;
    max-width: 250px;
    min-height: 1.0em;
    min-width: 100px;
    padding: 0.1em 0.2em;
    line-height: 1.5em;
  }

  .item {
    display: flex;
    checkbox-sk {
      margin: 2px auto;
    }
  }

  .header {
    display: flex;
    flex-direction: row;
    max-width: 1200px;

    .filter_box {
      margin-bottom: 5px;
      flex-grow: 1;
    }

    .summary {
      padding: 5px;
      border-left: 1px solid black;

      .title {
        font-size: 1.2em;
        font-weight: 700;
      }

      tr > :first-child {
        text-align: right;
      }
      tr > * {
        min-width: 2.0em;
      }

      .fleet_header {
        cursor: pointer;
      }
    }
  }

  .chip_container {
    min-height: 1.5em;
    padding: 5px 8px;
    display: flex;
    flex-wrap: wrap;

    .chip {
      border: 1px solid #555;
      background-color: #e4ecf1;
      border-radius: 8px;
      padding: 5px;
      margin: 0 2px 3px 0;
    }
  }

  cancel-icon-sk, add-circle-icon-sk {
    fill: #555;
    vertical-align: text-bottom;
    cursor: pointer;

    /* & is called the sass parent selector
     * https://stackoverflow.com/a/15983654
     */
    &:hover {
      fill: #000;
    }

    svg.icon-sk-svg {
      width: 1.25em;
      height: 1.25em;
    }
  }

  .selector {
    border: 1px solid black;
    margin: 0 5px;
    max-height: 200px;
    min-height: 130px;
    min-width: 240px;
    overflow-y: auto;
    display: inline-block;
    vertical-align: top;
  }

  .search {
    display: inline-block;
    min-width: calc(100% - 40px);
    margin: 5px;
  }

  .options {
    /* If the screen is small enough that these wrap, it may be
    worth considering having a media query to spread these out flat.*/
    display: inline-block;

    .verbose > * {
      display: inline-block;
      margin: 0.4em 0;
    }

    input, a {
      display: block;
    }

    button {
      margin: 0.4em 0;
    }
  }

  .old_version {
    background-color: #ffffdd;
  }
  .quarantined, .bad-device {
    background-color: #ffdddd;
  }
  .maintenance {
    background-color: #cee9f9;
  }
  .dead {
    background-color: #cccccc;
  }
  .alt {
    background-color: #f8f8f8;
  }

  .delete.content {
    max-width: 500px;
    padding: 10px;

    button.goback {
      display:block;
      margin: 10 0 0 auto;
    }
  }
}